<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>我的预约</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="${path}/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="${path}/css/TenantCentre.css">
    <link rel="stylesheet" href="${path}/css/home.css">
    <link href="http://www.bootcss.com/p/bootstrap-datetimepicker/bootstrap-datetimepicker/css/datetimepicker.css" rel="stylesheet">
</head>
<style>
    .gray-bg{
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        background: url(http://${path2}/img/centre.jpg)  no-repeat center 0px;
        background-size: cover;

        background-position: center 0;
        background-repeat: no-repeat;
        background-attachment: fixed;
        -webkit-background-size: cover;
        -o-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;

    }
</style>
<body class="gray-bg">
<script src="${path}/plugins/jquery-3.4.1.js"></script>
<script src="${path}/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="http://www.bootcss.com/p/bootstrap-datetimepicker/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>

<%@include file="top.jsp"%>

<div class="col-md-9 zy3" id="insert" style="overflow:auto">
<div style="height: 1000px;width: 850px">
    <div class="date form_datetime" id="tdtime" style="display: none">
        <input size="10" type="text" id="date" style="color: black" autocomplete="off">
        <span class="add-on"><i class="icon-calendar"></i></span>
        <select style="size: 20px;height: 27px;color: black" id="time">
            <option>上午</option>
            <option>下午</option>
            <option>晚上</option>
        </select>
        <button type="button" onclick="changetime()">确定</button>
        <button type="button" onclick="nochangetime()" style="color: red">取消</button>
    </div>
    <table class="table table-hover">
        <thead>
        <tr>
            <th>房源名/门牌号</th>
            <th>经纪人姓名</th>
            <th>预约日期/时间段</th>
            <th>预约状态</th>
            <th>取消预约</th>
            <th>修改预约时间</th>
        </tr>
        </thead>
        <tbody id="tb">
            <c:forEach items="${appointmentTime}" var="a" varStatus="loop">

                <tr>
                    <td style="display: none">${a.id}</td>
            <td>${houseList[loop.count-1].residentialQuarters}<br>门牌号:${houseList[loop.count-1].doorplate}</td>
            <td>${agent[loop.count-1].name}</td>

            <td style="font-weight: bolder;color: blue"><fmt:formatDate value="${a.appointmentDate}" pattern="yyyy-MM-dd"></fmt:formatDate>/${a.timeQuantum}</td>

            <td style="color: red;font-weight: bolder" name="state">${a.appointmentState}</td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" onclick="del(this,'${a.id}')" class="glyphicon glyphicon-trash"></button></td>
                    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" name="re" onclick="replacetime(this)" class="glyphicon glyphicon-edit"></button></td>
                    <td style="display: none">${a.agentId}</td>
        </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
</div>



<%@include file="bottom.jsp"%>







<script>

    $(function(){
        $(".form_datetime").datetimepicker({
            format: 'yyyy-mm-dd',
            todayBtn:true,
            maxView: 'year',
            minView: 'month',
            initialDate: new Date(),
            autoclose: true,//选中自动关闭
            todayBtn: true,//显示今日按钮
            startDate:new Date()
        });
    })

    $(function () {
        let state = document.getElementsByName("state")
        for (let i = 0; i <state.length;i++) {
            let statetext = state[i].innerText;
            if (statetext == "预约成功"){
                state[i].style.color="#00FF00"
            }
            if (statetext == "预约失败"){
                state[i].style.color="#000"
            }

        }

    })




    function del(obj,id) {
        if(confirm("确定取消预约")) {
            let tbody = document.getElementById("tb");
            $.ajax({
                type: 'post',
                url: '/taofang/Appointment/delApp',
                data: {'id': id},
                success: function (data) {
                    if (data.code == 200) {
                        let tr = obj.parentElement.parentElement;
                        tbody.removeChild(tr);
                    } else {
                        alert("取消预约失败!");
                    }
                }
            })
        }else{

        }
    }

    function replacetime(obj) {
        let tr = obj.parentElement.parentElement;
        let td3 = $(tr).find('td').eq(3)
        let td33 = td3[0].innerHTML=""
        let div = document.getElementById("tdtime").style.display="inline";
        let tdtime =$("#tdtime")
        td3.append(tdtime)
        let re = document.getElementsByName("re");
        for (let i = 0; i < re.length ; i++) {
            re[i].style.display="none";
        }

    }

    function nochangetime() {
        let insert = $("#insert")
        let tr = document.getElementById("tdtime").parentElement.parentElement;
        let td3 = $(tr).find('td').eq(3)
        let tdtime =$("#tdtime")
        let id = $(tr).find('td').eq(0).text();

        let datas={"id":id}
        $.post('/taofang/Appointment/nochangeTime', datas, function (data) {
                insert.append(tdtime)
                let appointmentDate = data.data;
                let div = document.getElementById("tdtime").style.display="none";
                let td33 = td3[0].innerHTML=appointmentDate;
            let re = document.getElementsByName("re");
            for (let i = 0; i < re.length ; i++) {
                re[i].style.display="inline";
            }
        })




    }



    function changetime() {
        let insert = $("#insert")
        let tr = document.getElementById("tdtime").parentElement.parentElement;
        let td3 = $(tr).find('td').eq(3)
        let tdtime =$("#tdtime")
        let id = $(tr).find('td').eq(0).text();
        let agentId=$(tr).find('td').eq(7).text();
        // let a = agenttd.indexOf('/')
        // let agentId = agenttd.substring(3,a-1);
        let appointmentDates = $("#date").val();
        let datedate=new Date();
        let timeQuantum = $("#time").val();
        let tenantId = $("#tenantId").val();
        if (appointmentDates==""){
            alert("请填写预约的日期")
        }else{
            let datas={"id":id,"appointmentDates":appointmentDates,"timeQuantum":timeQuantum,"agentId":agentId,"tenantId":tenantId}
            $.post('/taofang/Appointment/changeTime', datas, function (data) {
                if (data.code == 200) {
                    insert.append(tdtime)
                    let div = document.getElementById("tdtime").style.display="none";
                    let td33 = td3[0].innerHTML=appointmentDates+"/"+timeQuantum;
                    let td4 = $(tr).find('td').eq(4)
                    td4[0].style.color="#ff0000"
                    let td44 = td4[0].innerHTML="审核中"
                    let re = document.getElementsByName("re");
                    for (let i = 0; i < re.length ; i++) {
                        re[i].style.display="inline";
                    }
                }else if (data.code==500){
                    alert("预约时间段经纪人已有预约,请更改别的时间")
                    // insert.append(tdtime)
                    // let appointmentDate = data.data;
                    // let div = document.getElementById("tdtime").style.display="none";
                    // let td33 = td3[0].innerHTML=appointmentDate;
                    // let re = document.getElementsByName("re");
                    // for (let i = 0; i < re.length ; i++) {
                    //     re[i].style.display="inline";
                    // }
                }else if (data.code==800){
                    alert("预约时间段您已有预约，请更改别的时间")
                    // insert.append(tdtime)
                    // let appointmentDate = data.data;
                    // let div = document.getElementById("tdtime").style.display="none";
                    // let td33 = td3[0].innerHTML=appointmentDate;
                    // let re = document.getElementsByName("re");
                    // for (let i = 0; i < re.length ; i++) {
                    //     re[i].style.display="inline";
                    // }
                }
            })
        }

    }






</script>




</body>
</html>
